<template>
	<div class="container">
		<Header title="客户列表"></Header>
		<div class="fixed-header">
			<div class="searchDiv">
				<div class="input-wrap">
					<p class="input-text"><i class="fa fa-search"></i>
						<input type="search" placeholder="搜索" v-model="params.searchContent" ref="searchInput">
					</p>
				</div>
			</div>
		</div>
		<!-- tab-container -->
	    <ul class="confirm-list"
		  	v-infinite-scroll="findCusPreList"
		  	infinite-scroll-disabled="loading"
		  	infinite-scroll-distance="10">
	  		<li v-for="item in confirmList" v-if="item.rowShow">
	  			<div class="confirm-wrap" @click="toCustomerDetail(item.id)">
		    		<div class="confirm-info">
		    			<i class="fa fa-user-o"></i>
		    			<span class="name">{{item.name}}</span>
		    			<span class="sex" :class="{active: (item.gender==0)}"></span>
		    			<span class="label">{{item.customerStatusName}}</span>
		    			<div class="confirm-report">报备：{{item.createTime}}</div>
		    		</div>
		    		<p class="contact"><i class="fa fa-mobile"></i>{{item.mobile}}</p>
		    		<p class="source"><i class="fa fa-location-arrow"></i>来源：{{item.staffCompanyName}}</p>
	    		</div>
	    		<div class="operation-btn" style="margin-top: 0">
			    	<div class="footer-content">
		    			<a class="operation-btn-link" v-if="item.reportValidShow" @click="distInvalidShow(item)" v-res="{code:'menu_0008_0001_0001'}">无效</a>
		    			<a class="operation-btn-link" v-if="item.visitedValidShow" @click="distInvalidShow(item)"  v-res="{code:'menu_0008_0001_0002'}">无效</a>
		    			<a class="operation-btn-link" v-if="item.reportValidShow" @click="auditShow(item, 1)" v-res="{code:'menu_0008_0001_0001'}">报备有效</a>
		    			<a class="operation-btn-link" v-if="item.visitedValidShow" @click="auditShow(item, 6)" v-res="{code:'menu_0008_0001_0002'}">到访有效</a>
		    			<a class="operation-btn-link" v-if="item.completeNumberShow" @click="showCompleteNumModel(item)" v-res="{code:'menu_0008_0001_0003'}">补全号码</a>
		    			<!--a class="operation-btn-link" v-if="item.distBtnShow" @click="toDistAgent(item.id)" v-res="{code:'menu_0008_0002_0002'}">分配</a-->
		    		</div>
			    </div>
	    	</li>
	    </ul>
	    
	    <!-- 分配无效弹出层 -->
	    <div class="popup-page" v-if="isShow">
	    	<div class="popup-mask" @click="distInvalidClose"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">无效原因</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li v-for="(item,index) in options" @click="checkedState(item)" :class="{'active':item.isShow}">
							<i class="checkIcon"></i>{{item.name}}
							<input type="checkbox" class="mint-checkbox-input" v-model="item.isShow">
							<textarea v-if="index === 2" class="reason" rows="4" v-model="invalidObj.reason"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="distInvalidClose">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="distInValid">确定</a>
	    		</div>
	    	</div>
	    </div>
	    <!-- 补全号码弹出层 -->
	    <div class="popup-page" v-if="completeNum.modelShow">
	    	<div class="popup-mask"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">补全号码</div>
	    		<div class="popup-body">
	    			<div class="complete-information">
	    				<p>请将手机号中间四位补充完整</p>
	    				<div class="information-number">
	    					<span class="existingNumer">{{completeNum.mobilePrefix}}</span>
	    					<div class="number-list">
	    						<span class="number-list-item">{{ userTel.numA }}</span>
	    						<span class="number-list-item">{{ userTel.numB }}</span>
	    						<span class="number-list-item">{{ userTel.numC }}</span>
	    						<span class="number-list-item">{{ userTel.numD }}</span>
	    					</div>
	    					<span class="existingNumer">{{completeNum.mobileSuffix}}</span>
	    					<input type="tel" maxlength="4" class="number-input-box" v-model="completeNum.helfTel">
    						<input type="text" name="curPreId" v-model="completeNum.curPreId">
	    				</div>
	    			</div>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="closeCompleteNumModel">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="completeNumber">确定</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!-- 状态变更备注 -->
	    <div class="popup-page" v-if="auditObj.showModel">
	    	<div class="popup-mask" @click="auditClose"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">审核备注</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li style="padding-left: 0px;">
							<textarea class="reason" style="display: block;" rows="4" v-model="auditObj.remark"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="auditClose">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="auditReport">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	import { Navbar, TabItem, InfiniteScroll, Toast } from 'mint-ui';
	export default {
		components:{
			Navbar, TabItem, InfiniteScroll
		},
		data () {
		    return {
		      	selected:"pageA",
		      	isShow:false,
		      	params: {
		      		premisesId: window.sessionStorage.getItem(this.utilHelper.appAssistant+"_premisesId"),
		      		customerStatus: "",
		      		searchContent: this.$route.params.searchContent,
		      		pageNo: 0,
		      		pageSize: 5,
		      		totalPages: ''
		      	},
		      	confirmList: [],
		      	options:[
		    		{
		    			name:'无效电话号码',
		    			value: "0",
		    			isShow : true
		    		},
		    		{
		    			name:'无购房意向',
		    			value: "1",
		    			isShow : false
		    		},
		    		{
		    			name:'其他',
		    			value: "2",
		    			isShow : false
		    		}
		    	],
		    	completeNum:{
		      		modelShow: false,
		      		helfTel: '',
		      		mobilePrefix: '',
		      		mobileSuffix: '',
		      		row: {}
		      	},
		      	invalidObj: {
		    		curPreId: '',
		    		remark: '',
		    		row: {},
		    		reason: ''
		    	},
		    	auditObj: {
		    		showModel: false,
		    		remark: '',
		    		row: {},
		    		status: ''
		    	}
		    }
		},
		watch:{
			'params.searchContent':function(newValue,oldValue){
				var _self = this;
				_self.params.totalPages = '';
				_self.params.pageNo=0;
				_self.confirmList = [];
				_self.findCusPreList();
			}
		},
		computed: {
			userTel () {
		      	let numA,numB,numC,numD
		      	if ((this.completeNum.helfTel).length > 0) {
			        numA = this.completeNum.helfTel.substring(0,1); 
			        numB = this.completeNum.helfTel.substring(1,2);
			        numC = this.completeNum.helfTel.substring(2,3);
			        numD = this.completeNum.helfTel.substring(3,4);
		      	}
		      	return {
		        	numA,numB,numC,numD
		      	}
		    }
		},
		methods :{
			findCusPreList(){
				var _self = this;
				_self.loading = true;
				_self.params.pageNo += 1;
				if(_self.params.pageNo && _self.params.totalPages){
					if(_self.params.pageNo >= _self.params.totalPages){
						_self.loading = false;
						Toast({
						  	message: "数据已全部展示",
						  	position: 'middle',
						  	duration: 2000
						});
						return false;
					}
				}
				var body = {};
				body.params = {
					premisesId: _self.params.premisesId,
		      		customerStatus: _self.params.customerStatus,
		      		name: _self.params.searchContent,
		      		pageNo: _self.params.pageNo,
		      		pageSize: _self.params.pageSize
				};
				var url = _self.utilHelper.apiUrl + "/api/getCPPage";
				_self.$http.post(url, body).then((response) => {
					var body = response.body;
					var result = body.result;
					var errorMsg = body.resData.resultMsg;
					var resData = body.resData;
					var resPage = resData.cpDtoPage;
					var resRows = resPage.rows;
					_self.params.totalPages = resPage.totalPages;
					if(resRows != null){
						for(var i=0;i<resRows.length;i++){
							//报备状态
							var row = resRows[i];
							var customerStatus = row.customerStatus;
							var mobile = row.mobile;
							var isDist = row.isDist;
							//无效按钮
							var reportInValidShow = true;
							if(customerStatus == "-1"){
								reportInValidShow = false;
							}
							//补全号码按钮
							var completeNumberShow = false;
							//报备有效按钮
							var reportValidShow = false;
							//到访有效按钮
							var visitedValidShow = false;
							//分配无效
							var distInValidShow = false;
							//分配按钮
							var distBtnShow = false;
							//是否处于报备保护期
							/*var visitProtecting = row.visitProtecting;
							if(!visitProtecting){*/
							if("0" == customerStatus){
                                reportValidShow = true;
							}else if("6" == customerStatus){
                                //分配无效展示,报备审核相关无效按钮隐藏
                                distInValidShow = true;
                                reportInValidShow = false;
                                if("F" == isDist){
                                    distBtnShow = true;
                                }else{
                                    distBtnShow = false;
                                    reportInValidShow = false;
                                    distInValidShow = false;
                                }
							}else if("10" == customerStatus){
							    if(mobile.indexOf("****") >= 0){
                                    reportValidShow = false;
                                    visitedValidShow = false;
                                    completeNumberShow = true;
								}else{
                                    reportValidShow = false;
                                    visitedValidShow = true;
                                    completeNumberShow = false;
								}
							}


                            /*
                                                            if("0" == customerStatus){
                                                                reportValidShow = true;
                                                            }
                                                            if("10" == customerStatus){
                                                                visitedValidShow = true;
                                                            }
                                                            if("6" == customerStatus){
                                                                //分配无效展示,报备审核相关无效按钮隐藏
                                                                distInValidShow = true;
                                                                reportInValidShow = false;
                                                            }
                                                            if(mobile.indexOf("****") >= 0 && "10" == customerStatus){
                                                                reportValidShow = false;
                                                                visitedValidShow = false;
                                                                completeNumberShow = true;
                                                            }

                                                            if("6" == customerStatus){
                                                                if("F" == isDist){
                                                                    distBtnShow = true;
                                                                }else{
                                                                    distBtnShow = false;
                                                                    reportInValidShow = false;
                                                                    distInValidShow = false;
                                                                }
                                                            }
                                                        }else{
                                                            row.customerStatusName = "报备保护期11";
                                                            reportInValidShow = false;
                                                        }*/
							
							row.rowShow = true;
							row.reportInValidShow = reportInValidShow;
							row.distInValidShow = distInValidShow;
							row.completeNumberShow = completeNumberShow;
							row.reportValidShow = reportValidShow;
							row.visitedValidShow = visitedValidShow;
							row.distBtnShow = distBtnShow;
							_self.confirmList.push(row);
						}
					}
					if(_self.confirmList.length == 0){
						Toast({
						  	message: "禀告主人，伦家没找到报备客户，请输入完整的姓名或电话号码查询哦！",
						  	position: 'middle',
						  	duration: 2000
						});
					}
					_self.loading = false;
				});
			},
			reportInvalid(row){
				//报备无效
				var _self = this;
				var body = {};
				body.params = {
					id : row.id,
					customerStatus : "-1",
				};
				row.reportInValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, bidy).then((response) => {
					var data = response.body.resData;
		   			var result = data.result;
		   			var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	row.reportInValidShow = false;
							row.completeNumberShow = false;
							row.reportValidShow = false;
							row.visitedValidShow = false;
							row.distBtnShow = false;
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.reportInValidShow = true;
						}, 2000);
					}
				});
			},
			auditShow(row, status) {
				var _self = this;
				_self.auditObj.showModel = true;
				_self.auditObj.row = row;
				_self.auditObj.status = status;
			},
			auditClose() {
				var _self = this;
				_self.auditObj.showModel = false;
			},
			auditReport(){
				var _self = this;
				var auditValue = "";
				var auditReason = "";
				auditReason = _self.auditObj.remark;
				if(!auditReason){
					Toast({
					  	message: "请填写审核备注!",
					  	position: 'middle',
					  	duration: 2000
					});
					return false;
				}
				var body = {};
				body.params = {
					id : _self.auditObj.row.id,
					customerStatus : _self.auditObj.status,
					remark : _self.auditObj.remark
				};
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
		   			var result = data.result;
		   			var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	//报备有效,显示到访有效按钮
						  	if(body.params.customerStatus == "1"){
						  		_self.auditObj.remark = "";
						  		_self.auditObj.showModel = false;
						  		_self.auditObj.row.reportValidShow = false;
						  		_self.auditObj.row.visitedValidShow = true;
						  		_self.auditObj.row.customerStatusName = "报备有效";
						  	}else if(body.params.customerStatus == "6"){
						  		_self.auditObj.remark = "";
						  		_self.auditObj.showModel = false;
						  		_self.auditObj.row.visitedValidShow = false;
								_self.auditObj.row.reportInValidShow = false;
								_self.auditObj.row.distBtnShow = true;
								_self.auditObj.row.distInValidShow = true;
							  	_self.auditObj.row.customerStatusName = "已到访";
						  	}
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						}, 2000);
					}
				});
			},
			showCompleteNumModel(row){
				//补全号码
				var _self = this;
				_self.completeNum.modelShow = true;
				//号码前三后四
				_self.completeNum.mobilePrefix = row.mobile.substring(0,3);
				_self.completeNum.mobileSuffix = row.mobile.substring(7,11);
				_self.completeNum.row = row;
			},
			closeCompleteNumModel() {
				var _self = this;
				_self.completeNum.modelShow = false;
			},
			completeNumber() {
				var _self = this;
				var curPreId = _self.completeNum.row.id;
				var wholeMobile = _self.completeNum.mobilePrefix + _self.completeNum.helfTel + _self.completeNum.mobileSuffix;
				var body = {};
				body.params = {
					id : curPreId,
					mobile : wholeMobile
				};
				_self.completeNum.row.completeNumberShow = false;
				var url = _self.utilHelper.apiUrl + "/api/completePhone";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	//补全号码成功,显示无效、审核有效按钮
						  	_self.completeNum.row.reportInValidShow = true;
							_self.completeNum.row.reportValidShow = true;
							_self.completeNum.row.visitedValidShow = false;
							_self.completeNum.row.distBtnShow = false;
							_self.completeNum.modelShow = false;
						  	_self.completeNum.row.mobile = wholeMobile;
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	_self.completeNum.row.completeNumberShow = true;
						}, 2000);
					}
				});
			},
			reportValid(row){
				//报备有效
				var _self = this;
				var body = {};
				body.params = {
					id : row.id,
					customerStatus : "1"
				};
				row.reportValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	//报备有效,显示到访有效按钮
						  	row.visitedValidShow = true;
						  	row.customerStatusName = "报备有效";
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.reportValidShow = true;
						}, 2000);
					}
				});
			},
			visitedValid(row){
				//到访有效
				var _self = this;
				var body = {};
				body.params = {
					id : row.id,
					customerStatus : "6"
				};
				row.visitedValidShow = false;
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, params).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
							//隐藏改行
							row.reportInValidShow = false;
							row.distBtnShow = true;
							row.distInValidShow = true;
						  	row.customerStatusName = "已到访";
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	row.visitedValidShow = true;
						}, 2000);
					}
				});
			},
			toDistAgent(id) {
				var _self = this;
				_self.$router.replace({
					path: '/distribution/'+id
				})
			},
			distInvalidShow(row) {
				var _self = this;
				_self.isShow = true;
				_self.invalidObj.row = row;
			},
			distInvalidClose() {
				this.isShow = false;
			},
			distInValid() {
				var _self = this;
				var invalidValue = "";
				var invalidReason = "";
				_self.options.forEach(function(options,index){
					if(options.isShow == true){
						invalidValue = options.value;
						invalidReason = options.name;
					}
				});
				if("2" == invalidValue){
					invalidReason = _self.invalidObj.reason;
					if(!invalidReason){
						Toast({
						  	message: "请填写报备无效原因!",
						  	position: 'middle',
						  	duration: 2000
						});
						return false;
					}
				}
				var body = {};
				body.params = {
					id :  _self.invalidObj.row.id,
					customerStatus : "-1",
					remark : invalidReason
				};
				var url = _self.utilHelper.apiUrl + "/api/auditCP";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	_self.completeNum.row.reportInValidShow = true;
							_self.completeNum.row.reportValidShow = true;
							_self.completeNum.row.visitedValidShow = false;
							_self.completeNum.row.distBtnShow = false;
							_self.completeNum.row.distInValidShow = false;
						  	_self.invalidObj.row.rowShow = false;
						  	_self.isShow = false;
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						}, 2000);
					}
				});
			},
			checkedState (item) {
				this.options.forEach(function(options,index){
					options.isShow = false;
				})
				item.isShow = true;
			},
			toCustomerDetail(id){
				var _self = this;
				_self.$router.replace({
					path: '/customerDetails/'+id
				})
			}
		}
	}
</script>
<style scoped>
	.fixed-header{position: fixed;top: 3em;left: 0;right: 0;z-index: 10;}
	.searchDiv{height: 55px;background-color: #f8f5f3;padding: 10px;position: relative;border-bottom: 1px solid #cdcdcd; }
	.searchDiv .input-wrap{width: 100%;height: 35px;border-radius: 40px;background-color: #fff;border:1px solid #cdcdcd;}
	.input-wrap .input-text{color: #cdcdcd;display: block;line-height: 33px;padding-left: 14px;}
	.input-wrap .input-text .fa{margin-right: 10px;font-size: 18px;position: relative;top: 1px;}
	.mint-navbar .mint-tab-item.is-selected{ border-bottom: 3px solid #eb6100;color: #eb6100;}
	.mint-navbar .mint-tab-item{padding: 13px 0;}
	.confirm-list{margin-top: 64px;}
	.confirm-list li{border-top: 1px solid #cdcdcd;border-bottom: 1px solid #cdcdcd;margin-bottom: 10px}
	.confirm-wrap{padding: 16px 10px;background-color: #fff;}
	.confirm-info{height: 20px;line-height: 20px;padding-right:138px;overflow: hidden;position: relative;}
	.confirm-info .fa-user-o{margin-right: 6px;float: left;margin-top: 3px;}
	.confirm-info .name{color: #000;margin-right: 6px;float: left;}
	.confirm-info .sex{width: 16px;height: 14px;overflow: hidden;background: url(../../assets/images/sex.png) no-repeat;background-size: 32px auto;display: inline-block;position: relative;top: 3px;margin-right: 4px;background-position: 0 0;float: left;}
	.confirm-info .sex.active{background-position: -16px 0; }
	.confirm-info .label{height: 14px;background-color: #65baf5;color: #fff;font-size: 12px;padding: 0 6px;float: left;line-height: 14px;margin-top: 3px;}
	.confirm-report{position: absolute;right: 0;top: 0;height: 20px;width: 138px;font-size: 12px;color: #999;}
	.contact{padding: 14px 0;line-height: 16px;color: #333;}
	.contact .fa-mobile,.source .fa-location-arrow{margin-right: 10px;font-size: 20px;}
	.source{color: #999;line-height: 16px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

	.operation-btn{padding: 6px 10px;background-color: #fffef6;border-top: 1px solid #cdcdcd; }
	.operation-btn .operation-btn-link{width: 50%;float: left;text-align: center;height: 24px;line-height: 24px;border-right: 1px solid #cdcdcd;color: #eb6100;font-size: 14px;}
	.operation-btn .operation-btn-link:last-child{border-right: none;}
	.operation-btn:after,.confirm-info:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	
	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.invalid-list li{position: relative;padding-left: 24px;line-height: 20px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 10px;}
	.checkIcon{position: absolute;left: 0;width: 18px;height: 18px;background:url(../../assets/images/checked.png) no-repeat;background-position: 0 0;background-size: 36px auto;top: 1px;}
	.invalid-list li:last-child{margin-bottom: 0;}
	.invalid-list .active .checkIcon{background-position: -18px 0;}
	.invalid-list .reason{border: 1px solid #cdcdcd;width: 100%;margin-top: 4px;display: none;}
	.invalid-list .active .reason{display: block;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	.complete-information{text-align: center;}
	.information-number{position: relative;line-height: 34px;padding-left: 8px;margin-top: 8px;}
	.information-number .existingNumer,.information-number .number-list{float: left;}
	.existingNumer{display: inline-block;}
	.number-list{display: inline-block;border-radius: 4px;border:1px solid #cdcdcd;height: 34px;line-height: 32px;margin: 0 6px;}
	.number-list .number-list-item{width: 30px;height: 100%;display: inline-block;border-right: 1px solid #cdcdcd;float: left;}
	.number-list .number-list-item:last-child{border-right: none;}
	.number-input-box{position: absolute;height: 34px;left: 40px;width: 135px;opacity: 0;}

	.footer-content:after,.information-number:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

</style>